<template>
  <div class="wrap">
    <div class="formMain">
      <div class="tle">
        <h2>
          <span>质权人信息</span>
          <div class="dashed"></div>
        </h2>
        <el-button size="small" type="primary" @click="alter(0)">点击修改</el-button>
      </div>
      <el-form label-width="150px">
        <div class="formList">
          <el-form-item
            class="formLi"
            :label="item.key"
            v-for="(item,index) in msgArr"
            :key="index"
          >
            <el-input :disabled="judeg" v-if="item.key !=='有效执照'" v-model="item.value"></el-input>
            <div class="img" v-else>
              <div class="upImg">
                <el-upload
                  action="#"
                  :class="{disabled:uploadDisabled}"
                  list-type="picture-card"
                  :on-remove="handleRemove"
                  :on-change="handleChange"
                  :limit="2"
                  :auto-upload="false"
                  :file-list="fileList"
                >
                  <i slot="default" class="el-icon-plus"></i>
                  <div slot="file" slot-scope="{file}">
                    <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
                    <span class="el-upload-list__item-actions">
                      <span
                        class="el-upload-list__item-preview"
                        @click="handlePictureCardPreview(file)"
                      >
                        <i class="el-icon-zoom-in"></i>
                      </span>
                      <span
                        v-if="!judeg"
                        class="el-upload-list__item-delete"
                        @click="handleRemove(file,fileList)"
                      >
                        <i class="el-icon-delete"></i>
                      </span>
                    </span>
                  </div>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt />
                </el-dialog>
              </div>
            </div>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="formMinor">
      <div class="tle">
        <div class="hidden">
          <h2>
            <span>其他共有申请人名称列表</span>
            <div class="dashed"></div>
          </h2>
        </div>
        <el-button size="small" type="primary" @click="alter(1)">点击修改</el-button>
      </div>
      <el-form label-width="150px">
        <div class="formList">
          <el-form-item
            class="formLi"
            :label="item.key"
            v-for="(item,index) in minorArr"
            :key="index"
          >
            <el-input :disabled="judegs" v-model="item.value"></el-input>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="btn">
      <el-button size="small" type="primary">提交并保存</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: "formTemplate",
  data() {
    return {
      //判断个人信息是否可修改
      judeg: true,
      //判断共有人信息是否可修改
      judegs: true,
      //

      uploadDisabled: true,
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      //个人信息
      msgArr: [
        {
          key: "申请人名称（中文）",
          value: "大猪蹄子",
        },
        {
          key: "申请人名称（中文）",
          value: "大猪蹄子",
        },
        {
          key: "申请人名称（中文）",
          value: "大猪蹄子",
        },
        {
          key: "申请人名称（中文）",
          value: "大猪蹄子",
        },
        {
          key: "申请人名称（中文）",
          value: "大猪蹄子",
        },
        {
          key: "申请人名称（中文）",
          value: "大猪蹄子",
        },
        {
          key: "申请人名称（中文）",
          value: "大猪蹄子",
        },
        {
          key: "申请人名称（中文）",
          value: "大猪蹄子",
        },
        {
          key: "申请人名称（中文）",
          value: "大猪蹄子",
        },

        {
          key: "申请人名称（中文）",
          value: "大猪蹄子",
        },
        {
          key: "申请人名称（中文）",
          value: "大猪蹄子",
        },
        {
          key: "申请人名称（中文）",
          value: "大猪蹄子",
        },
        {
          key: "申请人名称（中文）",
          value: "大猪蹄子",
        },
        {
          key: "申请人名称（中文）",
          value: "大猪蹄子",
        },
        {
          key: "申请人名称（中文）",
          value: "大猪蹄子",
        },
        {
          key: "申请人名称（中文）",
          value: "大猪蹄子",
        },
        {
          key: "申请人名称（中文）",
          value: "大猪蹄子",
        },
        {
          key: "电话",
          value: "17895486853",
        },
        {
          key: "有效执照",
          value:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          fileList: [
            {
              url:
                "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            },
          ],
          List: [
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          ],
        },
      ],
      //共有人信息
      minorArr: [
        {
          key: "申请人名称（中文）",
          value: "大猪蹄子",
        },
        {
          key: "申请人名称（中文）",
          value: "大猪蹄子",
        },
        {
          key: "申请人名称（中文）",
          value: "大猪蹄子",
        },
        {
          key: "申请人名称（中文）",
          value: "大猪蹄子",
        },
      ],

      //图片列表
      fileList: [
        {
          url:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        },
      ],
    };
  },
  mounted() {
    this.getdata();
  },
  methods: {
    //图片放大时触发
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //点击修改按钮
    alter(num) {
      if (!num) {
        this.judeg = !this.judeg;
      } else {
        this.judegs = !this.judegs;
      }
    },
    //图片添加时触发
    handleChange(file, fileList) {
      this.fileList.push({
        url: file.url,
      });
      if (fileList.length >= 1) {
        this.uploadDisabled = true;
      }
    },
    //图片删除时触发
    handleRemove(file, fileList) {
      fileList.pop();
      this.uploadDisabled = false;
    },
    // 获取传过来的信息
    getdata() {
      if (
        this.$route.params.id != "undefined" &&
        this.$route.params.data != "undefined"
      ) {
      }
    },
  },
};
</script>
<style lang="less" scoped>
.wrap {
  min-height: 800px;
  padding: 42px;
  .tle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1000px;
    margin-bottom: 20px;
    .hidden {
      width: 844px;
      overflow: hidden;
    }
    h2 {
      display: inline;
      position: relative;
      font-size: 18px;
      line-height: 25px;
      color: #666;
      .dashed {
        position: absolute;
        top: 50%;
        right: -10px;
        width: 744px;
        height: 1px;
        border-top: 1px dashed #d9d9d9;
        transform: translateX(100%);
      }
    }
  }
  .formList {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 1000px;
    height: 720px;
    .el-form-item {
      width: 50%;
    }
  }
}
// .el-upload-list__item-actions,.el-upload-list__item-status-label{
//     display: none ;
// }
.is-ready,
.el-upload,
.el-upload-list__item {
  width: 100px !important;
  height: 100px !important;
}
.el-upload--picture-card {
  line-height: 100px;
}
.el-form-item__label {
  font-size: 14px;
  color: #666;
}
.el-input__inner {
  border: none;
}
.el-button {
  background-color: #7dc3ff;
  border-radius: 2px;
  border: none;
}
.formMinor {
  .formList {
    height: 400px;
  }
}
.btn {
  display: flex;
  justify-content: center;
  .el-button {
    background-color: #999999;
  }
}
.disabled .el-upload--picture-card {
  display: none !important;
}
</style>